<template>
	<view>
		<uni-popup ref="popKz">
			<view class="pop-buttom-main">
				<view class=" pop-buttom-title">
					<view  class="flex-one text-center">请选择卡类</view>
					<view class="text-right">
						<image  src="@/static/qw@2x.png" @click="$refs.popKz.close()" class="close-image "></image>
					</view>
				</view>
				<view >
					<scroll-view :scroll-y="true" style="max-height: 40vh;">
						<view class="pd30">
							<view v-for="(item,index) in categoryList" :key="index" class="flex-between alcenter kz-item" @click="selectKz(item)">
								<view class="flex alcenter">
									<image v-if="item.image" :src="item.image.file_path" class="kz-img" mode="aspectFit"></image>
									<image v-else src="@/static/default_img/default.png" class="kz-img"></image>
									<view :class="{'c_0eb6ff':item.cate_id === kind.cate_id}" class="ft30">{{item.name}}</view>
								</view>
								<view class="icon-duihao1 iconfont c-00A212 ft40" v-if="item.cate_id === kind.cate_id"></view>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="popCardType">
			<view class="pop-card-intersection-main pop-padinw">
				<view class="text-right">
					<image src="@/static/qw@2x.png"  @click="$refs.popCardType.close()" class="intersection-close-img"></image>
				</view>
				<view class="mt16">
					<view class="flex alcenter">
						<view class="card-tewdf" @click="cardType = 1" :class="{'card-qds':cardType === 1}">卡类</view>
						<view class="card-tewdf" @click="cardType = 2" :class="{'card-qds':cardType === 2}">卡种</view>
					</view>
					<view class="mt32">
						<scroll-view :scroll-y="true" style="height: 60vh;" >
							<view  v-if="cardType === 1">
								<view class="flex alcenter flex-wrap">
									<view v-for="(item,index) in categoryList"  :key="index" class="pop-card-tyep-item" @click="selectKz(item)" :class="item.cate_id === kind.cate_id?'pop-card-tyep-item-active':''">
										<image :src="item.new_img"></image>
										<view>{{item.name}}</view>
									</view>
								</view>
							</view>
							<view v-if="cardType === 2">
								<view class="flex alcenter flex-wrap">
									<view v-for="(item,index) in goodsList"  :key="index" class="pop-card-tyep-item" @click="selectCardType(item)" :class="{'pop-card-tyep-item-active':item.id === race.id}">
										<image v-if="item.image" :src="item.image.file_path"  mode="aspectFit"></image>
										<image v-else src="@/static/default_img/default.png" ></image>
										<view class="mt16 ft26 c_737373">{{item.goods_name}}</view>
									</view>
								</view>
							</view>
						</scroll-view>
					</view>

<!-- 					<view class="c_333 ft30 font-bold">卡的类型</view>
					<view class=" mt30  alcenter relative" >
						<scroll-view :scroll-x="true" class="qwfdfbvb"  :scroll-left="scrollLeft">
							<view class="flex alcenter ">
								<view v-for="(item,index) in categoryList" :id="index" :key="index" class="pop-card-tyep-item" @click="selectKz(item)">
									<view style="width: 100rpx">
										<view class="pop-card-tyep-img" :class="item.cate_id === kind.cate_id?item.new_class + ' dwfqt':''">
											<image :src="item.new_img"  mode="aspectFit"></image>
										</view>
										<view class="ft28 mt10 c_737373">{{item.name}}</view>
									</view>
								</view>
							</view>
						</scroll-view>
						<view class="pop-card-tyep-item-right-img" @click="openRighww" >
						</view>
					</view>
					<view class="c_333 ft30 font-bold mt68">卡种</view>
					<view class="">
						<scroll-view :scroll-y="true" style="height: 45vh;">
							<view class="flex alcenter flex-wrap">
								<view v-for="(item,index) in goodsList" :key="index" class="goods-kz-item text-center" @click="selectCardType(item)" :class="{'kz-active-lll':item.id === race.id}">
									<image v-if="item.image" :src="item.image.file_path"  mode="aspectFit"></image>
									<image v-else src="@/static/default_img/default.png" ></image>
									<view class="mt16 ft26 c_737373">{{item.goods_name}}</view>
								</view>
							</view>
						</scroll-view>
					</view> -->
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="popFace">
			<view class="pop-card-intersection-main " style="border-top-right-radius: 12rpx;border-top-left-radius: 12rpx;">
          <view class="doling-item">
              <view class="doling-top">
                  <view class="doling-text">
                      选择面值
                  </view>
                  <image @click="$refs.popFace.close()" src="@/static/qw@2x.png" class="qx"></image>
              </view>
              <view class="doling-js">
                  面值选错将无法结算，由此产生的结果由您自己承担
              </view>
							<!-- :class="index==item?'active':''" -->
							<scroll-view :scroll-y="true" style="max-height: 50vh;">
								<view class="list ">
									<view class="list-item " @click="selectFace(item)"  v-for="(item,index) in goodsSkuList" :key="index" :class="item.goods_id==goods_sku.goods_id?'active':''">
										<view class="flex flex-between">
											<view>
												<view v-if="!item.show">
													<view class="list-mzhi">
															面值
													</view>
													<view class="list-jg">
															{{item.face_value==='0.00'?'自定义面值':Number(item.face_value)}}
													</view>
												</view>
												<view v-else class="list-mzhi ft28">{{item.show}}</view>
											</view>

											<view class="flex alcenter">
												 
													<view class="zkj">
															￥
													</view>
													<view class="zkj-text">
															 {{discount_show(item.face_value * discount(item.api_discount)) }}
													</view>
											</view>
										</view>

										<view class="list-bottom">
												<view class="bottom-left">
														<image src="/static/mzhi1@2x.png" mode=""></image>
														<view class="left-text">
																当前折扣
														</view>
												</view>
												<view class="bottom-right">
														<view class="text">
																{{item.api_discount}}
														</view>
														<view class="zk">
																折
														</view>
												</view>
										</view>
									</view>
								</view>
							</scroll-view>

          </view>
			</view>
		</uni-popup>
		<uni-popup ref="custom">
			<view class="pop-center-main">
				<view class="pop-top-title">
					<view class="title">自定义面值</view>
					<image src="@/static/qw@2x.png" @click="$refs.custom.close()"></image>
				</view>
				<view class="pop_orage">
					*请输入真实面值
				</view>
				<view class="pop_input">
					<input placeholder="面值区间为1~9999" type="number" maxlength="4" v-model="custom"/>
				</view>
				<view class="pop-center-button mt44 mb20" @click="setCustom">
						确认提交
				</view>
			</view>
		</uni-popup>
		<uni-popup
			  ref="qykefu" 
			>
			<view class="pop-center-main">
				<view class="pop-top-title">
					<view class="title">客服微信</view>
					<image src="@/static/qw@2x.png" @click="$refs.qykefu.close()"></image>
				</view>
				<view class="pop_orage">
					*绑定微信的沃尔玛需要添加企业微信客服获取回收流程
				</view>
				<view class="text-center  mt32-mb48">
					<image :src='image?image:"../../static/logo/logo.png"'  show-menu-by-longpress class='pop-serive-img'></image>
				</view>
			</view>
		</uni-popup>

	</view>
</template>

<script>
	import * as couponApi from '@/api/coupon.js'
	import mescrollEmpty from '@/components/lccg/mescroll-uni/components/mescroll-empty/mescroll-empty.vue'
	import * as Api from '@/api/good_detail.js'
	export default{
		props:{
			cardCodeDetail:{
				type:Object,
				default:{}
			}
		},
		data(){
			return{
				categoryList:[],
				goodsList:[],
				goodsSkuList:[],
				goods_sku:{},
				race:{},
				kind:{},
				custom:"",
				image:uni.getStorageSync('qy_home'),
				scrollLeft:0,
				customDetail:{},
				couponList:{
					current_page: 1,
					last_page:1,
					data:[]
				},
				couponDetail:{},
				cardType:1
			}
		},
		components:{
			mescrollEmpty
		},
		onShow() {
			this.image = uni.getStorageSync('qy_home')
		},
		onLoad() {
			
		},
		methods:{
			openImg(){
				this.$emit('qwdqwfgght')
			},
			bottomCoupon(){
				if(this.couponList.current_page < this.couponList.last_page){
					this.couponList.couponList += 1
					this.getCouponList()
				}
			},
			openRighww(event){
				this.scrollLeft += 30
			},
			oepnLinksdw(){
				location.href = 'https://new.ex.quancangyun.cn/#/Sync?type=1'
			},
			openQ(){
				
			},
			qykefu(){
				this.$refs.qykefu.open('center')
			},
			openTh(){
				this.$refs.th_course.open('center')
			},
			setCustom(){
				this.$emit('handleFace',this.goods_sku,this.custom)
				this.$refs.custom.close()
				this.$refs.popFace.close()
			},
			realBool(){
				let token = uni.getStorageSync("AccessToken")
				if(token){
					let userInfo = uni.getStorageSync('userInfo')
					if(userInfo.is_real === 0){
						uni.showModal({
							title:"提示",
							content:'提交卡券需要进行实名验证是否现在验证',
							cancelText:"取消",
							confirmText:"确认",
							confirmColor:"#0eb6ff",
							success: (res) => {
								if(res.confirm){
									uni.navigateTo({
										url:"/pages/user/user_item/real/primary",
									})
								}else{
									return false
								}
							}
						})
					}else{
						return true
					}
				}else{
					
					this.$fxLink.checkLoinjudge()
					return false
				}
			},
			selectFace(item){
				if(!this.realBool()){
					return
				}
				if(item.status != 1){
					this.$toast('此面值暂时维护')
					return
				}
				this.goods_sku = item
				if(item.face_value === '0.00'){
					this.$refs.custom.open('center')
					return
				}
				this.$emit('handleFace',item)
				this.$refs.popFace.close()
			},
			discount_show(price){
				return price.toFixed(2)
			},
			discount(price){
				let bool = false
				let number = 0
				for(let i=0;i<price.length;i++){
					if(price[i] == '.'){
						bool = true
					}
				}
				if(bool){
					return Number(price) / 100
					
				}else{
					return Number(price) / 100
				}
			},
			handFace(goodsSkuList,goods_sku,race){
				this.goodsSkuList = goodsSkuList
				this.goods_sku = goods_sku
				this.race = race
				this.customDetail = {}
				for(let i=0;i<this.goodsSkuList.length;i++){
					if(this.goodsSkuList[i].face_value == '0.00'){
						this.customDetail = this.goodsSkuList[i]
						break
					}
				}
				this.$refs.popFace.open('bottom')
			},
			handType(goodsList,race,categoryList,kind){
				this.kind = kind
				this.categoryList = categoryList
				this.goodsList = goodsList
				this.race = race
				this.$refs.popCardType.open('bottom')
			},
			selectCardType(item){
				this.race = item
				this.goods_sku = {}
				this.$emit('handleCardType',item)
				this.$refs.popCardType.close()
			},
			handKz(categoryList,kind){
				this.kind = kind
				this.categoryList = categoryList
				this.$refs.popKz.open('bottom')
			},
			handCounpon(detail,goods_sku){
				if(this.couponList.data.length === 0){
					this.getCouponList()
				}
				console.log(detail);
				this.couponDetail = detail
				this.goods_sku = goods_sku
				this.$refs.coupon.open('bottom')
			},
			getCouponList(){
				couponApi.cardpackage({
					page:this.couponList.current_page,
					type:0
				})
				.then(result => {
					this.couponList.current_page = result.data.current_page 
					this.couponList.last_page = result.data.last_page 
					this.couponList.data.push(...result.data.data)
				})
			},
			async selectCoupon(item){
				let dict = item
				if(item.id  === this.couponDetail.id){
					dict = {}
				}else{
					let result = await this.chenkcoupons(item,this.goods_sku)
					if(result.code === 0){
						this.$toast(result.msg)
						return
					}
				}
				this.$emit('handleCounpon',dict)
				this.$refs.coupon.close()
			},
			chenkcoupons(item,goods_sku){
				return new Promise((relove,reject) => {
					Api.chenkcoupons({
						coupons_id:item.id,
						product_no:goods_sku.product_no
					})
					.then(result => {
						relove(result)
					})
				})
			},
			selectKz(item){
				this.kind = item
				this.cardType = 2
				this.$emit('handleKz',item)
				// this.$refs.popKz.close()
			}
		}
	}
</script>

<style lang="scss">
	.kz-item{
		border-bottom: 1rpx solid #ddd;
		padding: 24rpx 0;
	}
	.kz-item image{
		width: 60rpx;
		height: 63rpx;
		margin-right: 24rpx;
	}
	.kz-item:first-child{
		padding-top: 0;
	}
	.kz-item:last-child{
		border: none;
	}
	.face-remark{
		background-color: #fff6ea;
		color: #ff9800;
		height: 72rpx;
		font-size: 36rpx;
		line-height: 72rpx;
		margin: 20rpx 0;
		border-radius: 10rpx;
	}
	.goods-face-item{
		margin-bottom: 20rpx;
		text-align: center;
		background-color: #e9e8e8;
		width: 29.0%;
		margin-right: 1.03%;
		border-radius: 10rpx;
		position: relative;
		height: 110rpx;
		padding: 10rpx 10rpx;
		overflow: hidden;
		border: 1rpx solid #e9e8e8;
		/* #ifdef MP-KUAISHOU */
		width: 28.4%;
		/* #endif */ 
		&.active{
			border: 3rpx solid #fe5339;
			background-color: #FFFFFF !important;
		}
	}
	.goods-face-item:nth-child(3n){
		margin-right: 0;
	}
	.inclined{
		position: absolute;
		transform: rotate(-45deg);
		left: -17%;
		top: 5%;
		font-size: 20rpx;
		color: #fff;
		width: 50%;
		height: 28rpx;
		line-height: 28rpx;
	}
	.voluntarily{
		background: #ec6a29;
	}
	.maintain{
		background: #dd524d;
	}
	.text-main{
		// color: $uni-color-main;
	}
	.dqwfbbb{
		width: 400rpx;
		height: 300rpx;
		margin-top: 14rpx;
	}
	.th-img{
		width: 640rpx;
		height: 800rpx;
	}
	
	.pop-card-intersection-main{
		// background: #F5F7FA;
		// padding-bottom: 20rpx;
		background-color: #fff;
	}
	.pop-padinw{
		padding: 40rpx 32rpx;
	}
	.intersection-close-img{
		width: 32rpx;
		height: 32rpx;
	}

	.pop-card-tyep-img{
		// width: 80rpx;
		// height: 80rpx;
		background: linear-gradient( 180deg, #c4d5e8 0%, #9195aa 100%);
		border-radius: 100%;
		text-align: center;
		padding: 18rpx 10rpx;
		border: 4rpx solid #F5F5FA;
		
	}
	.pop-card-tyep-img-active{
		background: linear-gradient( 180deg, #B071FF 0%, #F391FF 100%);
		border-color: #0EB6FF;
	}
	.dwfqt{
		border-color: #0EB6FF;
	}
	.pop-card-tyep-item-right-img{
		margin-left: 20rpx;
		position: absolute;
		right: 0rpx;
		top: 10rpx;
	}
	.pop-card-tyep-item-right-img image{
		width: 56rpx;
		height: 52rpx;
	}
	.qwfdfbvb{
		width: 88%;
	}
	.goods-kz-item{
		background: #FFFFFF;
		border-radius: 16rpx;
		border: 4rpx solid #fff;
		min-height: 182rpx;
		width: 28.6%;
		margin-right: 4.5%;
		margin-top: 32rpx;
		padding: 26rpx 0;
	}
	.goods-kz-item:nth-child(3n){
		margin-right: 0;
	}
	.goods-kz-item image{
		width: 96rpx;
		height: 96rpx;
		border-radius: 100%;
	}
	.kz-active-lll{
		border-color: #0EB6FF;
		background: #E5F7FF;
	}
	.pop-card-tyep-img image{
		width: 50rpx;
		height: 50rpx;
	}
	.pop-face-top-main{
		background: #D3F2FF;
		border-radius: 160rpx;
		// padding: 6rpx 8rpx 6rpx 22rpx;
		// color: $uni-color-main;
		height: 48rpx;
		line-height: 48rpx;
		font-size: 30rpx;
		width: 342rpx;
		margin: 0 auto;
	}
	.pop-face-top-main image{
		width: 32rpx;
		height: 32rpx;
		margin-right: 16rpx;
	}
	.face-custom-dqw{
		padding: 32rpx 24rpx;
		border-radius: 16rpx;
	}
	.face-wsf-main{
		// background: linear-gradient( 180deg, #FFFDD4 0%, rgba(255,253,212,0) 100%);
		// background-color: #D3F2FF;
		padding-bottom: 32rpx;
		border-radius: 16rpx;
		position: relative;
	}
	.card-detail-facevalu-item{
		background: #FFFFFF;
		border-radius: 16rpx;
		width: 27%;
		margin-right:4.4%;
		height: 200rpx;
		margin-top: 30rpx;
		padding: 0 10rpx;
		border: 1rpx solid #fff;
		position: relative;
		text-align: center;
		&.active{
			// border-color: $uni-color-main;
		}
	}
	.card-detail-facevalu-item:nth-child(3n){
		margin-right: 0;
	}
	.fffza{
		margin-top: 58rpx;
	}
	.dasdwqttt{
		padding:0 24rpx;
	}
	.card-detail-facevalu-item-dis{
		// background-image: url('../../../static/goods/test/discount.png');
		background-size: 100% 100%;
		width: 112rpx;
		height: 68rpx;
		position: absolute;
		top: -10rpx;
		left: -20rpx;
		font-weight: bold;
		font-size: 26rpx;
		color: #FFFFFF;
		z-index: 2;
		top: 0;
		left: 0;
		color: #ec6a29;
	}
	.card-detail-facevalu-status{
		background-size: 100% 100%;
		width: 84rpx;
		height: 84rpx;
		position: absolute;
		line-height: 84rpx;
		top:-40rpx;
		right: -30rpx;
		font-size: 26rpx;
	}
	.fqwbn-coupon{
		padding-top: 48rpx;
		padding-bottom: 60rpx;
	}

	.face-top-warning{
		height: 80rpx;
		line-height: 80rpx;
		display: flex;
		align-items: center;
		border-top-left-radius: 12rpx;
		border-top-right-radius: 12rpx;
	}
	.group-wsl{
		height: 150rpx;
	}
	
	
	
	
	.doling-item{
	    padding: 40rpx 32rpx;
	    .doling-top{
	        position: relative;
	        .doling-text{
	            height: 50rpx;
	            font-family: PingFang SC, PingFang SC;
	            font-weight: 600;
	            font-size: 36rpx;
	            color: #333333;
	            line-height: 50rpx;
	            text-align: center;
	            font-style: normal;
	            text-transform: none;
	        }
	        .qx{
	            position: absolute;
	            right: 5rpx;
	            bottom: 8rpx;
	            width: 32rpx;
	            height: 32rpx;
	        }
	    }
	    .doling-js{
	        margin-top: 16rpx;
	        margin-bottom: 64rpx;
	        height: 40rpx;
	        font-family: PingFang SC, PingFang SC;
	        font-weight: 400;
	        font-size: 26rpx;
	        color: #ABB0B2;
	        line-height: 40rpx;
	        text-align: center;
	        font-style: normal;
	        text-transform: none;
	    }
	    .list{
	        display: flex;
	        flex-wrap: wrap;
	        justify-content: space-between;
	        .list-item{
	            transition: 0.5s linear;
	            margin-bottom: 38rpx;
							border: 4rpx solid transparent;
	            width: 330rpx;
	            height: 144rpx;
	            box-sizing: border-box;
	            position: relative;
							background-image: url('@/static/bjmzhi@2x.png');
							background-size: 100% 100%;
	            .bjmzhi{
	               
	                position: absolute;
	                width: 330rpx;
	                height: 144rpx;
	            }
	            .list-mzhi{
	                margin-left: 24rpx;
	                padding-top: 16rpx;
	                position: relative;
	                height: 26rpx;
	                font-family: PingFang SC, PingFang SC;
	                font-weight: 400;
	                font-size: 20rpx;
	                color: #333333;
	                line-height: 21rpx;
	                text-align: left;
	                font-style: normal;
	                text-transform: none;
	            }
	            .list-jg{
	                margin-left: 24rpx;
	                 position: relative;
	                 // width: 82rpx;
	                 height: 40rpx;
	                 font-family: D-DIN-DIN, D-DIN-DIN;
	                 font-weight: bold;
	                 font-size: 36rpx;
	                 color: #333333;
	                 line-height: 42rpx;
	                 text-align: left;
	                 font-style: normal;
	                 text-transform: none;
	            }

							.zkj{

							    font-family: PingFang SC, PingFang SC;
							    font-weight: 600;
							    font-size: 18rpx;
							    color: #FE3131;
							    text-align: left;
							    font-style: normal;
							    text-transform: none;
							}
							.zkj-text{

							    font-family: D-DIN-DIN, D-DIN-DIN;
							    font-weight: bold;
							    font-size: 27rpx;
							    color: #FE3131;

							    text-align: left;
							    font-style: normal;
							    text-transform: none;
							}
	            .list-bottom{
	                margin-top: 18rpx;
	                margin-left: 24rpx;
	                margin-right: 6rpx;
	                 display: flex;
	                 justify-content: space-between;
	                 align-items: center;
	                position: relative;
	                bottom: 0;
	                // width: 288rpx;
	                height: 38rpx;
	                background: #FFFBF1;
	                border-radius: 0rpx 0rpx 0rpx 0rpx;
	                .bottom-left{
	                    align-items: center;
	                     display: flex;
	                  image{
	                      margin-right: 10rpx;
	                      width: 38rpx;
	                      height: 38rpx;
	                  }  
	                  .left-text{
	                      width: 72rpx;
	                      height: 38rpx;
	                      font-family: PingFang SC, PingFang SC;
	                      font-weight: 400;
	                      font-size: 18rpx;
	                      color: #9C8446;
	                      line-height: 38rpx;
	                      text-align: left;
	                      font-style: normal;
	                      text-transform: none;
	                  }
	                }
	                .bottom-right{
	                    display: flex;
	                    align-items: center;
	                    .text{
	                        margin-right: 4rpx;
	                        font-family: D-DIN-DIN, D-DIN-DIN;
	                        font-weight: bold;
	                        font-size: 26rpx;
	                        color: #9C8446;
	                        text-align: left;
	                        font-style: normal;
	                        text-transform: none;
	                    }
	                    .zk{
	                        font-family: PingFang SC, PingFang SC;
	                        font-weight: 400;
	                        font-size: 18rpx;
	                        color: #9C8446;
	                        text-align: left;
	                        font-style: normal;
	                        text-transform: none;
	                    }
	                }
	            }
	        }
	        .active{
	            border: 4rpx solid #9C8446;
	            .bjmzhi{
	                left: -4rpx;
	            }
	        }
	    }
	}
	.card-tewdf{
		font-size: 34rpx;
		margin-left: 10rpx;
	}
	.card-qds{
		font-weight: 600;
		color: #9C8446;
	}
	.pop-card-tyep-item{
		width: 47%;
		background: #FCFDFD;
		box-shadow: 0rpx 8rpx 40rpx 0rpx #E8EBEE;
		margin-right: 4.5%;
		margin-top: 40rpx;
		text-align: center;
		padding: 30rpx 0;
		border: 1rpx solid #fff;
		transition: 0.3s;
	}
	.pop-card-tyep-item image{
		width: 80rpx;
		height: 80rpx;
	}
	.pop-card-tyep-item:nth-child(2n){
		margin-right: 0;
	}
	.pop-card-tyep-item-active{
		border-color: #9C8446;
	}
</style>